<template>
  <div class="club-square">
    <div class="page-header">
      <h1>社团广场</h1>
      <p>发现更多有趣的社团，丰富你的校园生活</p>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="search-section">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索社团名称或关键词"
              :prefix-icon="Search"
              clearable
            />
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="searchForm.category"
              placeholder="选择分类"
              clearable
            >
              <el-option
                v-for="category in categories"
                :key="category.value"
                :label="category.label"
                :value="category.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="searchForm.status"
              placeholder="选择状态"
              clearable
            >
              <el-option label="正常" value="1" />
              <el-option label="待审批" value="0" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <!-- 社团列表 -->
    <div class="clubs-section">
      <el-row :gutter="20">
        <el-col
          v-for="club in clubList"
          :key="club.id"
          :span="8"
          class="club-card-col"
        >
          <el-card class="club-card" shadow="hover">
            <div class="club-header">
              <el-avatar
                :size="60"
                :src="club.logo_url"
                class="club-logo"
              >
                {{ club.club_name.charAt(0) }}
              </el-avatar>
              <div class="club-info">
                <h3 class="club-name">{{ club.club_name }}</h3>
                <p class="club-category">{{ club.category }}</p>
                <div class="club-stats">
                  <span class="member-count">
                    <el-icon><User /></el-icon>
                    {{ club.member_count }}人
                  </span>
                  <span class="activity-count">
                    <el-icon><Calendar /></el-icon>
                    {{ club.activity_count }}个活动
                  </span>
                </div>
              </div>
            </div>
            
            <div class="club-description">
              <p>{{ club.description || '暂无简介' }}</p>
            </div>
            
            <div class="club-actions">
              <el-button
                type="primary"
                @click="handleJoinClub(club.id)"
                :disabled="club.isJoined"
              >
                {{ club.isJoined ? '已加入' : '申请加入' }}
              </el-button>
              <el-button @click="handleViewDetail(club.id)">
                查看详情
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[12, 24, 48]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, User, Calendar } from '@element-plus/icons-vue'

export default {
  name: 'ClubSquare',
  components: {
    Search,
    User,
    Calendar
  },
  setup() {
    const searchForm = reactive({
      keyword: '',
      category: '',
      status: ''
    })
    
    const categories = ref([
      { label: '学术类', value: '学术类' },
      { label: '体育类', value: '体育类' },
      { label: '文艺类', value: '文艺类' },
      { label: '科技类', value: '科技类' },
      { label: '公益类', value: '公益类' }
    ])
    
    const clubList = ref([
      {
        id: 1,
        club_name: '摄影社团',
        logo_url: '',
        category: '文艺类',
        description: '用镜头记录美好瞬间，分享摄影技巧，一起探索摄影的奥秘。',
        member_count: 45,
        activity_count: 8,
        isJoined: false
      },
      {
        id: 2,
        club_name: '篮球社团',
        logo_url: '',
        category: '体育类',
        description: '热爱篮球，享受运动，在球场上挥洒汗水，结交志同道合的朋友。',
        member_count: 32,
        activity_count: 12,
        isJoined: true
      },
      {
        id: 3,
        club_name: '编程社团',
        logo_url: '',
        category: '科技类',
        description: '学习编程技术，参与项目开发，提升编程能力，为未来职业发展做准备。',
        member_count: 28,
        activity_count: 6,
        isJoined: false
      }
    ])
    
    const pagination = reactive({
      currentPage: 1,
      pageSize: 12,
      total: 50
    })
    
    const handleSearch = () => {
      console.log('搜索条件:', searchForm)
      // 这里实现搜索逻辑
    }
    
    const handleJoinClub = (clubId) => {
      ElMessage.success('申请已提交，等待审核')
      // 这里实现加入社团逻辑
    }
    
    const handleViewDetail = (clubId) => {
      console.log('查看社团详情:', clubId)
      // 这里实现查看详情逻辑
    }
    
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      // 重新加载数据
    }
    
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      // 重新加载数据
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      searchForm,
      categories,
      clubList,
      pagination,
      handleSearch,
      handleJoinClub,
      handleViewDetail,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.club-square {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .search-section {
    margin-bottom: 24px;
  }

  .clubs-section {
    margin-bottom: 32px;

    .club-card-col {
      margin-bottom: 20px;
    }

    .club-card {
      height: 100%;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-2px);
      }

      .club-header {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;

        .club-logo {
          margin-right: 16px;
          flex-shrink: 0;
        }

        .club-info {
          flex: 1;
          min-width: 0;

          .club-name {
            margin: 0 0 4px;
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .club-category {
            margin: 0 0 8px;
            font-size: 14px;
            color: #909399;
          }

          .club-stats {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: #606266;

            span {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }

      .club-description {
        margin-bottom: 16px;

        p {
          margin: 0;
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .club-actions {
        display: flex;
        gap: 8px;
      }
    }
  }

  .pagination-section {
    display: flex;
    justify-content: center;
  }
}
</style>
